<script setup>
import { ref, reactive } from 'vue';
import dayjs from 'dayjs';
import Type from '@components/search/type';
import Search from '@components/search/index';
import PageWrapper from '@components/PageWrapper.vue';
import { common, service } from '@utils';
import TitleValue from '@components/TitleValue';
import { useRoute } from 'vue-router';
import { View } from '@element-plus/icons-vue';
import { usePremission } from '@hooks';
// import Detail from './Detail'

const data = ref();

const route = useRoute();

const premission = usePremission({
    view: 'bfqz:order:view',
    companycode: 'bfqz:account:companycode', //平台
    company: 'bfqz:account:company', //商家
});

const pageRef = ref();
const tableRef = ref();
const detailRef = ref();
const riskRef = ref();

const sonStatuss = ref();

let queryForm = {
    time: '',
    startCreateTime: new Date(),
    endCreateTime: new Date(),
};
let date = new Date();
let end = date.getTime();
date.setDate(1);
let start = date.getTime();
end = dayjs(end).format('YYYY-MM-DD 23:59:59');
start = dayjs(start).format('YYYY-MM-DD 00:00:00');
queryForm.time = [start, end];

let objectData = ref({});

let resArr = ref({});
let searchs = reactive([
    {
        type: Type.DATE_RANGE,
        width: 8,
        key: 'time',
        default: queryForm.time,
        endPlaceholder: '结束时间',
        startPlaceholder: '开始时间',
    },
    {
        type: Type.SELECT,
        key: 'companyCode',
        width: 3,
        valueKey: 'companyCode',
        placeholder: '商家名称',
    },
    {
        type: Type.INPUT,
        key: 'createUser',
        width: 5,
        placeholder: '操作人',
    },
    {
        type: Type.SELECT,
        key: 'bizTypeCode',
        width: 5,
        placeholder: '查询风控类型',
        labelKey: 'text',
        valueKey: 'code',
        data: [],
    },
    {
        type: Type.INPUT,
        key: 'orderId',
        width: 5,
        placeholder: '订单编号',
    },
    {
        type: Type.INPUT,
        key: 'balanceNo',
        width: 5,
        placeholder: '流水单号',
    },
    {
        width: 6,
        type: Type.SEARCH_EXPORT_BUTTON,
    },
]);
if (!premission.companycode) {
    searchs.splice(1, 1);
}
if (!premission.company) {
    searchs.splice(2, 1);
}
const numLine = ref(1);
const onLineNum = num => {
    numLine.value = num;
};

const onSearch = param => {
    queryForm = param;
    pageRef.value.refresh();
};

const getData = async ({ pageNum, pageSize }, cb) => {
    const query = { ...queryForm };
    if (query.time && query.time.length > 0) {
        query.startCreateTime = query.time[0];
        query.endCreateTime = query.time[1];
        delete query.time;
    }
    // const res = await service.statics.logistics(pageNum, pageSize, query)
    let res = {};
    if (premission.companycode) {
        res = await service.bfqz.riskAccountBalance(pageNum, pageSize, query);
        // objectData.value = res
        // resArr = res
        // cb(resArr)
    } else {
        res = await service.bfqz.riskAccountBalanceCompany(pageNum, pageSize, query);
    }
    objectData.value = res;
    resArr = res;
    cb(resArr.list);
    setTimeout(() => {
        tableRef.value.scrollTo(0, 0);
    }, 0);
};

const getStatuss = async () => {
    if (premission.companycode) {
            const company = await service.auth.companyAll();
            searchs[1].data = company;
        }
    // const res = await service.sys.dictionaryAll();
    // if (res) {
    //     let statuss = null;
    //     let edpService = null;
    //     for (let i = 0; i < res.length; i++) {
    //         if (res[i].code === 'orderState') {
    //             statuss = res[i].list;
    //         } else if (res[i].code === 'sonOrderState') {
    //             sonStatuss.value = res[i].list;
    //         } else if (res[i].code === 'edp-service') {
    //             edpService = res[i].list;
    //         }
    //     }

    //     // searchs[3].data = statuss
    //     // searchs[2].data = edpService

        
    // }
};

const exportData = async query => {
    query = { ...query };
    if (query.time && query.time.length > 0) {
        query.startCreateTime = query.time[0];
        query.endCreateTime = query.time[1];
        delete query.time;
    }
    query.fileName = '风控账户信息.xlsx';
    if (premission.companycode) {
        const res = await service.bfqz.riskAccountExport(query);
        res && common.export(res, query.fileName);
    } else {
        const res = await service.bfqz.riskAccountExport2(query);
        res && common.export(res, query.fileName);
    }
};

const getDataStatements = async () => {
    const res = await service.bfqz.riskAccountType();
    searchs[2].data = res;
};

getDataStatements();

getStatuss();

const width = (function (premission) {
    let width = 24;
    premission.view && (width += 33 * 2);
    return Math.max(width, 72);
})(premission);
</script>
<template>
    <div style="width: 100%;flex: 1;overflow: auto;">
        <section class="box-wite">
            <div class="all-box">
                <!-- 平台 -->
                <div class="all-box-item" v-if="premission.companycode">
                    <div class="all-box-item-font">
                        <div class="all-box-item-font1">平台风控余额</div>
                        <div class="all-box-item-font2">¥{{ objectData.money }}</div>
                    </div>
                    <div class="all-box-item-img">
                        <img src="../../assets/image/all.png" alt="" />
                    </div>
                </div>
                <div class="all-box-item" v-if="premission.companycode" style="background: #f2f2ff">
                    <div class="all-box-item-font">
                        <div class="all-box-item-font1">商家风控总充值</div>
                        <div class="all-box-item-font2">¥{{ objectData.topUpRiskMoney }}</div>
                    </div>
                    <div class="all-box-item-img" style="background: #d2cbf9">
                        <img src="../../assets/image/all.png" alt="" />
                    </div>
                </div>
                <!-- 商家 -->
                <div class="all-box-item" v-if="premission.company" style="background: #fff1f1">
                    <div class="all-box-item-font">
                        <div class="all-box-item-font1">账户余额</div>
                        <div class="all-box-item-font2">¥{{ objectData.money }}</div>
                    </div>
                    <div class="all-box-item-img" style="background: #ff554b">
                        <img src="../../assets/image/all.png" alt="" />
                    </div>
                </div>
            </div>
            <search :items="searchs" @filter="onSearch" @onLineNum="onLineNum" @export="exportData" :on-load="true" />
        </section>
        <section class="box-wite">
            <div class="box-wite-title">查询汇总</div>
            <!-- 商家 -->
            <div class="box-wite-body" v-if="premission.company">
                <div class="box-wite-body-item">
                    <span>视成报告查询消费/次数：</span>
                    <span style="color: #e7584f">¥{{ objectData.seeRiskCount }}次</span>
                </div>
                <div class="box-wite-body-item">
                    <span>全景雷达查询消费/次数：</span>
                    <span style="color: #e7584f">¥{{ objectData.radarRiskCount }}次</span>
                </div>
                <!-- <div class="box-wite-body-item">
                    <span>探针查询次数消费/次数：</span>
                    <span style="color: #e7584f">¥{{ objectData.probeRiskCount }}次</span>
                </div> -->
                <div class="box-wite-body-item">
                    <span>总消费：</span>
                    <span style="color: #e7584f">¥{{ objectData.countAmount }}</span>
                </div>
                <div class="box-wite-body-item">
                    <span>总充值金额/次数：</span>
                    <span style="color: #e7584f">{{ objectData.topUpRiskCount }}次</span>
                </div>
            </div>
            <!-- 平台 -->
            <div class="box-wite-body" v-else>
                <div class="box-wite-body-item">
                    <span>视成报告总收入/查询次数：</span>
                    <span style="color: #e7584f">¥{{ objectData.seeRiskCount }}次</span>
                </div>
                <div class="box-wite-body-item">
                    <span>全景雷达总收入/查询次数：</span>
                    <span style="color: #e7584f">¥{{ objectData.radarRiskCount }}次</span>
                </div>
                <!-- <div class="box-wite-body-item">
                    <span>探针总收入/查询次数：</span>
                    <span style="color: #e7584f">¥{{ objectData.probeRiskCount }}次</span>
                </div> -->
                <div class="box-wite-body-item">
                    <span>总收入：</span>
                    <span style="color: #e7584f">¥{{ objectData.countAmount }}</span>
                </div>
                <div class="box-wite-body-item">
                    <span>商家数量：</span>
                    <span style="color: #e7584f">{{ objectData.companyCount }}</span>
                </div>
            </div>
        </section>
        <section class="box-wite">
            <page-wrapper @get-data="getData" ref="pageRef" :on-load="false">
                <template v-slot:default="props">
                    <vxe-table ref="tableRef" :loading="props.loading" :data="props.tableData.records" :max-height="common.tableHeight(true, numLine, 147)" highlight-hover-row round stripe border class="mytable-scrollbar"
                    show-overflow>
                        <vxe-column type="seq" width="50" fixed="left"></vxe-column>
                        <vxe-column v-if="premission.companycode" field="label" title="商户名" width="200" fixed="left" />
                        <vxe-column field="orderId" title="关联订单" width="200" />
                        <vxe-column field="" title="风控账单类型" width="160">
                            <template #default="{ row }">
                                {{ common.getValueByKey('code', row.riskType, searchs[2].data, 'text') }}
                            </template>
                        </vxe-column>
                        <vxe-column title="金额（元）" width="150">
                            <template #default="{ row }">{{ row.balanceType == 1 ? '+' : '-' }}{{ row.balanceAmount }}</template>
                        </vxe-column>
                        <vxe-column field="createUser" title="操作人" width="220" />
                        <vxe-column field="createTime" title="操作时间" width="170" />
                        <vxe-column field="balanceNo" title="流水单号" width="230" />
                        <vxe-column v-if="premission.company" field="beforeBalanceAmount" title="操作前余额(元)" width="200" />
                        <vxe-column v-if="premission.company" field="afterBalanceAmount" title="操作后余额(元)" width="200" />
                        <vxe-column v-if="premission.companycode" field="beforeBalanceAmount" title="操作前商家账户余额(元)" width="170" />
                        <vxe-column v-if="premission.companycode" field="afterBalanceAmount" title="操作后商家账户余额(元)" width="170" />
                        <vxe-column v-if="premission.companycode" field="plamBeforeBalanceAmount" title="操作前平台风控余额(元)" width="170" />
                        <vxe-column v-if="premission.companycode" field="plamAfterBalanceAmount" title="操作后平台风控余额(元)" width="170" />
                    </vxe-table>
                </template>
            </page-wrapper>
        </section>
    </div>
</template>
<style lang="scss" scoped>
:deep(.el-button + .el-button) {
    margin-left: 10px;
}
.box-wite {
    // width: 100%;
    // height: auto;
    padding: 20px;
    margin: 20px;
    background: #ffffff;
    box-sizing: border-box;
    border-radius: 6px;
    .box-wite-title {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1f1f20;
        border-bottom: 1px solid #e6e6e6;
        padding-bottom: 14px;
    }
    .box-wite-body {
        width: 100%;
        padding-top: 20px;
        display: flex;
        justify-content: space-between;
        .box-wite-body-item {
            box-sizing: border-box;
            width: 300px;
            height: 70px;
            background: #ffffff;
            border-radius: 4px;
            border: 1px solid #ffb3ae;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .all-box {
        display: flex;
        margin-bottom: 30px;
        .all-box-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 295px;
            height: 140px;
            background: #fff6de;
            border-radius: 4px;
            margin-right: 25px;
            padding: 0 20px 0 25px;
            .all-box-item-font {
                .all-box-item-font1 {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #595959;
                    line-height: 20px;
                    margin-bottom: 22px;
                }
                .all-box-item-font2 {
                    font-size: 32px;
                    font-family: DINCondensed-Bold, DINCondensed;
                    font-weight: bold;
                    color: #1f1f20;
                }
            }
            .all-box-item-img {
                width: 74px;
                height: 74px;
                background: #ffde81;
                border-radius: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                    width: 42px;
                    height: 42px;
                    // background: #ffffff;
                }
            }
        }
    }
}
</style>
